<template>
  <view class="container">
    <!-- 活动轮播图 -->
    <view class="banner-section">
      <swiper class="banner-swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(banner, index) in banners" :key="index">
          <image :src="banner.image" class="banner-image" mode="aspectFill" />
          <view class="banner-overlay">
            <text class="banner-title">{{ banner.title }}</text>
            <text class="banner-desc">{{ banner.description }}</text>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 当前活动 -->
    <view class="section">
      <view class="section-title">当前活动</view>
      <view class="promotion-list">
        <view 
          class="promotion-item" 
          v-for="(promotion, index) in currentPromotions" 
          :key="index"
          @click="goToPromotionDetail(promotion)"
        >
          <image :src="promotion.image" class="promotion-image" mode="aspectFill" />
          <view class="promotion-info">
            <view class="promotion-header">
              <text class="promotion-title">{{ promotion.title }}</text>
              <view class="promotion-tag" :class="promotion.type">{{ getTypeLabel(promotion.type) }}</view>
            </view>
            <text class="promotion-desc">{{ promotion.description }}</text>
            <view class="promotion-meta">
              <text class="promotion-time">{{ formatTime(promotion.startTime) }} - {{ formatTime(promotion.endTime) }}</text>
              <text class="promotion-status" :class="promotion.status">{{ getStatusLabel(promotion.status) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 优惠券 -->
    <view class="section" v-if="coupons && coupons.length > 0">
      <view class="section-title">优惠券</view>
      <view class="coupon-list">
        <view 
          class="coupon-item" 
          v-for="(coupon, index) in coupons" 
          :key="index"
          @click="useCoupon(coupon)"
        >
          <view class="coupon-left">
            <view class="coupon-amount">
              <text class="amount-symbol">¥</text>
              <text class="amount-value">{{ coupon.amount }}</text>
            </view>
            <text class="coupon-condition">满{{ coupon.minAmount }}可用</text>
          </view>
          <view class="coupon-right">
            <text class="coupon-title">{{ coupon.title }}</text>
            <text class="coupon-desc">{{ coupon.description }}</text>
            <text class="coupon-expire">有效期至：{{ formatDate(coupon.expireTime) }}</text>
          </view>
          <view class="coupon-status" :class="coupon.status">
            {{ getCouponStatusLabel(coupon.status) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 会员特权 -->
    <view class="section" v-if="memberBenefits && memberBenefits.length > 0">
      <view class="section-title">会员特权</view>
      <view class="benefits-grid">
        <view 
          class="benefit-item" 
          v-for="(benefit, index) in memberBenefits" 
          :key="index"
        >
          <view class="benefit-icon">{{ benefit.icon }}</view>
          <text class="benefit-name">{{ benefit.name }}</text>
          <text class="benefit-desc">{{ benefit.description }}</text>
        </view>
      </view>
    </view>

    <!-- 积分商城 -->
    <view class="section" v-if="pointsMall && pointsMall.length > 0">
      <view class="section-title">积分商城</view>
      <view class="mall-list">
        <view 
          class="mall-item" 
          v-for="(item, index) in pointsMall" 
          :key="index"
          @click="exchangeItem(item)"
        >
          <image :src="item.image" class="mall-image" mode="aspectFill" />
          <view class="mall-info">
            <text class="mall-title">{{ item.title }}</text>
            <text class="mall-desc">{{ item.description }}</text>
            <view class="mall-meta">
              <text class="mall-points">{{ item.points }} 积分</text>
              <text class="mall-stock">库存: {{ item.stock }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 活动规则 -->
    <view class="section">
      <view class="section-title">活动规则</view>
      <view class="rules-list">
        <view class="rule-item" v-for="(rule, index) in activityRules" :key="index">
          <text class="rule-number">{{ index + 1 }}</text>
          <text class="rule-text">{{ rule }}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="bottom-actions">
      <view class="action-btn" @click="goToBooking">立即预订</view>
      <view class="action-btn secondary" @click="contactService">在线咨询</view>
    </view>
  </view>
</template>

<script>
import { getBannerList } from '../../api/banner.js'

export default {
  data() {
    return {
      banners: [],
      currentPromotions: [
        {
          id: 1,
          title: '新用户专享优惠',
          description: '首次预订享受8折优惠，快来体验吧！',
          image: '/static/promotion1.jpg',
          type: 'discount',
          status: 'active',
          startTime: '2024-01-01',
          endTime: '2024-12-31'
        },
        {
          id: 2,
          title: '团体预订优惠',
          description: '3人以上团体预订享受额外优惠',
          image: '/static/promotion2.jpg',
          type: 'group',
          status: 'active',
          startTime: '2024-01-01',
          endTime: '2024-12-31'
        },
        {
          id: 3,
          title: '会员积分活动',
          description: '预订场地即可获得积分，积分可兑换优惠券',
          image: '/static/promotion3.jpg',
          type: 'points',
          status: 'active',
          startTime: '2024-01-01',
          endTime: '2024-12-31'
        }
      ],
      coupons: [
        {
          id: 1,
          title: '新用户专享券',
          description: '首次使用，全场通用',
          amount: 20,
          minAmount: 100,
          expireTime: '2024-12-31',
          status: 'available'
        },
        {
          id: 2,
          title: '周末特惠券',
          description: '仅限周末使用',
          amount: 30,
          minAmount: 150,
          expireTime: '2024-12-31',
          status: 'used'
        }
      ],
      memberBenefits: [
        {
          icon: '🎁',
          name: '生日特权',
          description: '生日当月享受免费场地1小时'
        },
        {
          icon: '🎯',
          name: '积分加倍',
          description: '会员消费积分双倍累计'
        },
        {
          icon: '🏆',
          name: '优先预订',
          description: '热门时段优先预订权'
        },
        {
          icon: '💎',
          name: '专属服务',
          description: '专属客服一对一服务'
        }
      ],
      pointsMall: [
        {
          id: 1,
          title: '免费场地券',
          description: '1小时免费场地使用券',
          image: '/static/mall1.jpg',
          points: 1000,
          stock: 50
        },
        {
          id: 2,
          title: '运动水杯',
          description: '精美运动水杯，实用美观',
          image: '/static/mall2.jpg',
          points: 500,
          stock: 20
        }
      ],
      activityRules: [
        '活动时间：2024年1月1日-12月31日',
        '新用户指首次注册并完成实名认证的用户',
        '优惠券不可与其他优惠同时使用',
        '团体预订需提前24小时预约',
        '积分兑换商品不支持退换',
        '活动最终解释权归场馆所有'
      ]
    }
  },
  onLoad() {
    this.loadBanners()
  },
  methods: {
    async loadBanners() {
      try {
        const result = await getBannerList()
        if (result.code === 200) {
          this.banners = result.data || []
        }
      } catch (error) {
        console.error('加载轮播图失败:', error)
      }
    },
    
    getTypeLabel(type) {
      const types = {
        discount: '折扣',
        group: '团体',
        points: '积分',
        gift: '礼品'
      }
      return types[type] || '活动'
    },
    
    getStatusLabel(status) {
      const statuses = {
        active: '进行中',
        upcoming: '即将开始',
        ended: '已结束'
      }
      return statuses[status] || '未知'
    },
    
    getCouponStatusLabel(status) {
      const statuses = {
        available: '可用',
        used: '已使用',
        expired: '已过期'
      }
      return statuses[status] || '未知'
    },
    
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return date.toLocaleDateString()
    },
    
    formatDate(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return date.toLocaleDateString()
    },
    
    goToPromotionDetail(promotion) {
      uni.showToast({
        title: `查看${promotion.title}详情`,
        icon: 'none'
      })
    },
    
    useCoupon(coupon) {
      if (coupon.status === 'available') {
        uni.showToast({
          title: '优惠券已使用',
          icon: 'success'
        })
        coupon.status = 'used'
      } else {
        uni.showToast({
          title: '优惠券不可用',
          icon: 'none'
        })
      }
    },
    
    exchangeItem(item) {
      if (item.stock > 0) {
        uni.showModal({
          title: '确认兑换',
          content: `确定使用${item.points}积分兑换${item.title}吗？`,
          success: (res) => {
            if (res.confirm) {
              uni.showToast({
                title: '兑换成功',
                icon: 'success'
              })
              item.stock--
            }
          }
        })
      } else {
        uni.showToast({
          title: '库存不足',
          icon: 'none'
        })
      }
    },
    
    goToBooking() {
      uni.navigateTo({ url: '/pages/booking/booking' })
    },
    
    contactService() {
      uni.navigateTo({ url: '/pages/contact/contact' })
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 轮播图 */
.banner-section {
  height: 200px;
  margin-bottom: 20px;
}

.banner-swiper {
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 20px;
  color: white;
}

.banner-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.banner-desc {
  font-size: 14px;
  opacity: 0.9;
}

/* 通用区块 */
.section {
  background: white;
  margin: 15px;
  border-radius: 12px;
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: #07c160;
  border-radius: 2px;
}

/* 活动列表 */
.promotion-list {
  display: flex;
  flex-direction: column;
}

.promotion-item {
  display: flex;
  margin-bottom: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.promotion-item:last-child {
  margin-bottom: 0;
}

.promotion-image {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  margin-right: 12px;
}

.promotion-info {
  flex: 1;
}

.promotion-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px;
}

.promotion-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.promotion-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.promotion-tag.discount {
  background: #e6f7ff;
  color: #1890ff;
}

.promotion-tag.group {
  background: #f6ffed;
  color: #52c41a;
}

.promotion-tag.points {
  background: #fff7e6;
  color: #fa8c16;
}

.promotion-tag.gift {
  background: #f9f0ff;
  color: #722ed1;
}

.promotion-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.3;
  margin-bottom: 8px;
}

.promotion-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.promotion-time {
  font-size: 12px;
  color: #999;
}

.promotion-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
}

.promotion-status.active {
  background: #e8f5e8;
  color: #52c41a;
}

.promotion-status.upcoming {
  background: #fff2e8;
  color: #fa8c16;
}

.promotion-status.ended {
  background: #f5f5f5;
  color: #999;
}

/* 优惠券 */
.coupon-list {
  display: flex;
  flex-direction: column;
}

.coupon-item {
  display: flex;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  padding: 15px;
  color: white;
  position: relative;
  overflow: hidden;
}

.coupon-item:last-child {
  margin-bottom: 0;
}

.coupon-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  min-width: 80px;
}

.coupon-amount {
  display: flex;
  align-items: baseline;
}

.amount-symbol {
  font-size: 16px;
  margin-right: 2px;
}

.amount-value {
  font-size: 28px;
  font-weight: bold;
}

.coupon-condition {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 5px;
}

.coupon-right {
  flex: 1;
}

.coupon-title {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.coupon-desc {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.coupon-expire {
  font-size: 12px;
  opacity: 0.7;
}

.coupon-status {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
}

.coupon-status.used {
  background: rgba(0,0,0,0.3);
}

.coupon-status.expired {
  background: rgba(255,0,0,0.3);
}

/* 会员特权 */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.benefit-item {
  text-align: center;
  padding: 20px 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.benefit-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.benefit-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.benefit-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* 积分商城 */
.mall-list {
  display: flex;
  flex-direction: column;
}

.mall-item {
  display: flex;
  margin-bottom: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.mall-item:last-child {
  margin-bottom: 0;
}

.mall-image {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  margin-right: 12px;
}

.mall-info {
  flex: 1;
}

.mall-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.mall-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.mall-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mall-points {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b35;
}

.mall-stock {
  font-size: 12px;
  color: #999;
}

/* 活动规则 */
.rules-list {
  display: flex;
  flex-direction: column;
}

.rule-item {
  display: flex;
  margin-bottom: 10px;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.rule-number {
  width: 20px;
  height: 20px;
  background: #07c160;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
  flex-shrink: 0;
}

.rule-text {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  flex: 1;
}

/* 底部操作 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 15px;
}

.action-btn {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  background: #07c160;
  color: white;
}

.action-btn.secondary {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
}
</style> 